<template>
  <a-modal
    title="BOM引用情况"
    :width="1200"
    :visible="visible"
    :maskClosable="false"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
    @cancel="handleCancel">

    <a-spin :spinning="confirmLoading">
      <a-form :form="form" layout="inline">
        <a-row :gutter="48">

          <a-col :md="10" :sm="24">
           <a-form-item  label="时间">
                  <a-select
                      v-model="years"
                      mode="tags"
                      size="small"
                      placeholder="请选择年份"
                      style="width: 200px"
                  >
                      <a-select-option 
												:disabled='item.disable'
												:value="item.value"
												v-for="item in yearList"
												:key="item.value"
											>
                          {{ item.label }}
                      </a-select-option>
                  </a-select>
              </a-form-item>
          </a-col>

          <a-col :md="8" :sm="24">
            <span class="table-page-search-submitButtons">
              <a-button type="primary" @click="handleSubmit">查询</a-button>
<!--              <a-button style="margin-left: 8px" @click="buildCharts">重置</a-button>-->
            </span>
          </a-col>

        </a-row>
      </a-form>

      <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
      <div ref="charts" id="main" style="width: 100%;height:400px;"></div>
    </a-spin>
  </a-modal>
</template>

<script>
  import { add } from '@/api/modular/main/emsbom/emsBomManage'

export default {
  data() {
    return {
      labelCol: {
        xs: {span: 24},
        sm: {span: 8}
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 15}
      },
      labelColBlock: {
        xs: {span: 24},
        sm: {span: 4}
      },
      wrapperColBlock: {
        xs: {span: 24},
        sm: {span: 18}
      },
      visible: false,
      confirmLoading: false,
      form: this.$form.createForm(this),
      queryParam: {},
      years:[],
			yearList:[],
      record: null,
    }
  },
  methods: {
    show(record) {
      this.visible = true
      this.record = record
      this.years=[String(new Date().getFullYear())]
      this.buildCharts([])
    },
    // handleChange(value){
    //       this.years = value
    // },
    handleSubmit() {
          outStoreAnalysis({
            materialId: this.record.materialId,
            times: this.years
          }).then(res => {
            this.buildCharts(res.data)
          })
    },
    handleCancel() {
      this.visible = false
      this.years=[]
    },
    buildCharts(responseData) {
        // 基于准备好的dom，初始化echarts实例
        let myChart = echarts.init(document.getElementById('main'))




        let xData = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
        let yData = []
        // 如果图表有数据
        if(responseData){
           yData = responseData.map((item)=>{
             let month = item.month.map((item)=>{
               return item.number
             })
             return {
                name: item.year,
                type: "bar",
                barGap: 0,
                data: month,
             }
           })
        }


        // 指定图表的配置项和数据
       let option = {
        color: ["#ffdf25", "#36a9ce", "#d0e17d",'#ff5555'],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          left: "5%",
          right: "5%",
          bottom: "10%",
          top: "15%",
          containLabel: true,
        },
        calculable: true,
        xAxis: [
          {
            type: "category",
            axisTick: { show: false },
            data: xData
          },
        ],
        yAxis: [
          {
            type: "value"
          },
        ],
        series: yData,
      }





        // 使用刚指定的配置项和数据显示图表。
       option && myChart.setOption(option, true)
        // myChart1.setOption(option1)
      }
    }
  }
</script>